<template>
    <view>
      <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
        <template #title>
          事件更新
        </template>
        <div>
          <a-form ref="formRef" :rules="rules" :model="formData">
  
            <a-form-item field="eventId" label="事件ID" required>
              <a-input disabled v-model="formData.eventId" :max-length="16" />
            </a-form-item>
            <a-form-item field="eventName" label="事件名称" required>
              <a-input v-model="formData.eventName" :max-length="16" />
            </a-form-item>
            <a-form-item field="isAsync" label="开启异步">
              <a-switch v-model="formData.isAsync" :checked-value="true" :unchecked-value="false" />
            </a-form-item>
            <a-form-item field="status" label="启用状态">
              <a-switch v-model="formData.status" :checked-value="1" :unchecked-value="0" />
            </a-form-item>
            <a-form-item field="eventRange" label="事件范围" required>
              <div class="group-box">
                <a-select class="group-select" v-model="formData.eventRange" placeholder="请选择事件范围" allow-search>
                  <a-option v-for="item in eventRangeOptions" :value="item.value" :label="item.label"></a-option>
                </a-select>
              </div>
            </a-form-item>
            <a-form-item field="priority" label="事件优先级" required>
              <a-input-number :style="{ width: '180px' }" placeholder="请输入事件优先级" :default-value="formData.priority"
                mode="button" />
            </a-form-item>
            <a-form-item field="expression" label="触发条件">
              <a-textarea v-model="formData.expression" :max-length="1024" auto-size />
            </a-form-item>
            <a-form-item field="runScript" label="结果处理脚本">
              <a-textarea v-model="formData.runScript" :max-length="1024" auto-size />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </view>
  </template>
  <script setup>
  import useApp from "@/hooks";
  import EventApi from "@/api/FlowEvent";
  const { $ } = useApp();
  const visible = ref(false);
  const formRef = ref(null);
  $.on('event-update', id => {
    EventApi.queryOne(id).then(res=>{
        formData.value = res;
    })
    visible.value = true;
  })
  const formData = ref({
    id:'',
    eventId: '',
    eventName: '',
    eventRange: '',
    expression: '',
    isAsync: false,
    priority: 100,
    runScript: '',
    status: 1
  })
  // 定义事件范围
  const eventRangeOptions = ref([
    {
      label: '全局',
      value: 'ALL'
    },
    {
      label: '内部事件',
      value: 'IN'
    },
    {
      label: '外部事件',
      value: 'OUT'
    }
  ])
  let rules = ref({
    eventId: { required: true, message: "事件ID不可为空", minLength: 2 },
    eventName: { required: true, message: "事件名称不可为空", minLength: 1 },
    eventRange: { required: true, message: "请选择事件范围", minLength: 1 }
  });
  // 提交
  function handleOk() {
    formRef.value.validate((err) => {
      if ($.isEmpty(err)) {
        console.log('校验通过')
        EventApi.updateOne(formData.value).then(res => {
          visible.value = false;
          $.message.success('更新成功');
          $.emit('fresh-event', null);
        })
      } else {
        visible.value = true;
      }
    });
  }
  </script>
  <style>
  @import "@/styles/ftable.less";
  </style>